<template>
  <div class="inline-block w-auto max-h-full overflow-y-auto">
    <div v-for="item in data" class="aspect-video inline-block w-80">
      <img
        :src="item.coverImage"
        class="h-full w-full select-none cursor-pointer object-cover transition-all duration-500 blur-0 group-hover:blur-sm"
        draggable="false"
      />
      <span
        class="absolute left-1/2 top-[40%] -translate-x-1/2 -translate-y-1/2 text-3xl text-white font-bold scale-x-0 group-hover:scale-100 transition-transform duration-500 tracking-wider cursor-pointer"
      >
        {{ item.name }}
      </span>
      <span
        class="absolute left-1/2 top-[60%] -translate-x-1/2 -translate-y-1/2 text-2xl text-white font-bold scale-x-0 group-hover:scale-100 transition-transform duration-500 tracking-wider cursor-pointer"
      >
        {{ item.en_Name }}
      </span>
    </div>

    <div
      class="w-full h-24 sm:h-full sm:w-24 sm:bg-red-600 md:bg-orange-600 lg:bg-yellow-600 xl:bg-green-600"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { IMenuItem } from "@/utils/mock";

defineProps<{ data: IMenuItem[] }>();
</script>

<style scoped></style>
